<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: hotpink;
        overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <!-- 
      事件修饰符：

        修饰符的概念：
          让指令有更多的特点的一个内置功能
        语法：
          v-on:xx.yy.zz="handle"
            xx - 事件
            yy - 修饰符
            zz - 修饰符
        一些事件修饰符：
          1. .stop        阻止事件冒泡
          2. .prevent     阻止默认行为
          3. .self        只当 target 与 currentTarget 一致时才触发事件
              ? target 与 currentTarget 的区别？
                都是事件对象上的一个属性，表示事件触发的目标元素
                target 表示触发事件的元素
                currentTarget 表示绑定事件的元素

              ? mouseover 与 mouseout  | mouseenter 与 mouseleave ?
                第一组没有处理冒泡，会多次触发该事件
                第一组处理了冒泡，不会多次触发该事件
          4. .capture     让事件触发顺序修改为 捕获模式

          5. .once        让事件只触发一次，触发一次之后该事件会自动移除

          6. .passive     已经向浏览器表明了你不想阻止事件的默认行为。
              一般用于 滚动事件
              @scroll.passive="onScroll"

      按键修饰符
          给到键盘事件去使用的。
      系统按键修饰符
          .ctrl
          .shift
          .alt
          .meta
      精准匹配修饰符
          .exact
            当我们设置了一个 .ctrl.enter=""

      鼠标按键修饰符
          .left
          .right
          .middle
     -->
    <div id="app">
      <div class="box" @click="fn2">
        <button @click.stop="fn1">阻止冒泡</button>

        <a href="https://www.baidu.com" @click.prevent.stop="jump">跳转百度</a>
      </div>

      <hr />

      <div class="box" @click.self="fn3">
        <button>see target 与 currentTarget</button>
      </div>

      <hr />
      <!-- 给元素添加了 capture 修饰符，该元素内的事件触发 优先捕获默认 -->
      <div class="box" @click.capture="fn2">
        <button @click="fn1">捕获</button>
      </div>

      <hr />
      <div class="box" @click.once="fn2"></div>

      <hr />
      <div class="box" @scroll.passive="onScroll">
        <div style="height: 500px"></div>
      </div>

      <hr />

      <div class="box">
        <input type="text" placeholder="用户名" />
        <br />
        <input
          type="text"
          placeholder="密码"
          @keyup.ctrl.enter.exact="handleLogin"
        />
        <br />
        <button @click="handleLogin">登录</button>
      </div>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {
            count: 1,
          };
        },
        methods: {
          fn1(event) {
            // event.stopPropagation();
            console.log("fn1");
          },

          fn2() {
            console.log("fn2");
          },

          jump(event) {
            // event.preventDefault();
            alert("jump");
          },

          fn3(event) {
            console.log("fn3 event.target", event.target);
            console.log("fn3 event.currentTarget", event.currentTarget);

            if (event.target === event.currentTarget) {
              console.log("逻辑");
            }
          },

          onScroll() {
            // 默认情况下，当 该处理函数中的 逻辑非常重的时候，浏览器不知道你这个函数中有没有突然某个位置写个了阻止默认行为，他就需要完整的运行玩该函数的代码才能确定要不要阻止默认行为。
            console.log("onScroll");
            // 100代码
          },

          handleKeyup(event) {
            if (event.keyCode === 13) {
              // 按了 回车键，直接调用登录
              console.log("handleKeyup", event);

              this.handleLogin();
            }
          },

          handleLogin() {
            console.log("handleLogin");
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
